<template>
	<view class="pop-box-bg" :animation="animationData2" @click="close" :style="{paddingTop:contentTop + 'px'}">
		<view class="pop-content" :animation="animationData" @click.stop="" >
			<view class="content-info" v-if="isUpdate">
				为确保参与有效性，需要登记您的信息
			</view>
<!-- 			<view class="content-info">
				为确保本次砍价有效，需要
			</view>
			<view class="content-info">
				登记您的祝福信息
			</view> -->
<!-- 			<view class="content-info">
				<view class="content-info-avater">
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<view class="">
							<image mode="aspectFill" v-if="userInfo.avatar" :src="userInfo.avatar" />
							<image v-else src="/static/img/default_avater.png" mode="aspectFill"></image>
							<view>上传头像</view>
						</view>
					</button>
				</view>
			</view> -->
<!-- 			<view class="content-info">
				<view class="content-input-btn">
				<input v-if="showInput" type="text"  placeholder="请输入您的昵称" v-model="userInfo.nickname"/>
					
				</view>
			</view> -->
			<view class="content-info">
				<view class="content-input-btn">
					<button  class="form-btn theme-btn1" hover-class="press" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<text>{{userInfo.phone ? userInfo.phone : '授权手机号登录'}}</text>
					</button>
				</view>
			</view>
			<view class="content-info" @click="helpCutMoney">
				<view class="content-money-btn">
					{{isUpdate?'登记':'帮他/她积福'}}
				</view>
			</view>
		</view>
		<view class="pop-box-close" @click="close">
			<image src="/static/img/close.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				animationData:{},
				animationData2:{},
				userInfo:{
					wxcode:"",
					phone:''
				},
				showInput:false
			}
		},
		props:{
			showHelpPop:{
				type:Boolean,
				default:false
			},
			contentTop:{
				type:Number,
				default:0
			},
			myUserInfo:{
				type:Object,
				default:()=>({})
			},
			isUpdate:{
				type:Boolean,
				default:false
			}
		},
		mounted() {
			this.init()
			
		},
		methods:{
			init(){
				this.openAni()
				let {myUserInfo} = this.$props
				// 同步用户信息
				if(myUserInfo.id){
					this.userInfo = {
						wxcode:'',
						phone:myUserInfo.phone
					}
				}
				setTimeout(()=>{
					this.showInput = true
				},500)
			},
			close(){
				this.openAni(1)
				setTimeout(()=>{
					this.$emit('close')
				},300)
			},
			openAni(type) {
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				var animation2 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
			
				this.animation = animation
				this.animation2 = animation2
			
				animation.scale(type ? .2 : 1).step()
				animation2.opacity(type ? 0 : 1).step()
				this.animationData = animation.export()
				this.animationData2 = animation2.export()
			},
			// 处理头像
			onChooseAvatar(e){
				console.log('onChooseAvatar',e);
				var _this = this;
				var param = {};
				var  tempFilePaths = e.detail.avatarUrl;
				_this.$appData.user.uploadImage(tempFilePaths, param, function(resp){
					_this.userInfo.avatar = resp.data.url;
				})	
			},
			// 处理获取手机号
			getPhoneNumber(e){
				let _this = this
				let wxcode = e.detail.code
				this.$appData.user.getWxPhoneNumber({wxcode},function(res){
					_this.userInfo.wxcode = wxcode
					_this.userInfo.phone = res.data.phone
				})
			},
			// 帮助力
			helpCutMoney(){
				let { wxcode,phone } = this.userInfo
				let isUpdate = this.$props.isUpdate
				let _this = this
				if(phone){
					console.log('更新用户信息：',wxcode,phone);
					_this.$appData.user.updateUserInfo({phone},function(resp){
						//更新用户信息成功,发起助力
						_this.$emit('getUserInfo')
						if(!isUpdate){
							_this.$emit('helpCutMoney')
						}
						_this.$emit('close')
					})
					return
				}
				this.$com.alert('请完成登录')
			}
		}
	}
</script>

<style>
	.pop-box-bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .3);opacity: 0;display: flex;flex-direction: column; justify-content: center;align-items: center;z-index: 10;}
	.pop-content{width: 610rpx;background-color: white;border-radius: 20rpx;transform: scale(.2);}
/* 	.pop-money-btn{width: 600rpx;margin: 50rpx auto;border-radius: 50rpx;height: 80rpx;line-height: 80rpx;text-align: center;background-color: red;color: white;transition: all .3s;} */
/* 弹出信息 */
.content-info{padding: 30rpx 40rpx;}
.content-info-avater{margin: 0 auto;width: fit-content}
.content-info-avater button{width: fit-content;text-align: center;}
.content-info-avater image {width: 100rpx;height: 100rpx;border-radius: 50%;}
.info-avater-btn{font-size: 24rpx}
.content-input-btn,.content-money-btn {background-color: #f2f2f2;padding: 0 20rpx;border-radius: 20rpx;height: 100rpx;line-height: 100rpx;text-align: center;}
.content-input-btn input,.content-input-btn button{line-height: 100rpx;height: 100%;text-align: center;}
.content-input-btn button{background-color: transparent;color: black;font-size: 32rpx;box-shadow: none;}
/* 关闭按钮 */
.content-money-btn{height: 100rpx;line-height: 100rpx;background-color: black;color: white;text-align: center;border-radius: 100rpx;}
.pop-box-close{padding: 40rpx 0;}
.pop-box-close image{width: 80rpx;height: 80rpx;}
</style>